<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="/computershop/static/web/bootstrap3/js/holder.js"></script>
		<link href="/computershop/static/web/bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="/computershop/static/web/bootstrap3/jquery-1.8.3.min.js"></script>
		<script src="/computershop/static/web/bootstrap3/js/bootstrap.js"></script>
		<script src="/computershop/static/web/js/menu.js" type="text/javascript" charset="utf-8"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="/computershop/static/web/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="/computershop/static/web/css/layout.css" />
		<link rel="stylesheet" type="text/css" href="/computershop/static/web/css/webindex.css" />
		<link rel="stylesheet" type="text/css" href="/computershop/static/web/css/footer.css" />
		<link rel="stylesheet" type="text/css" href="/computershop/static/web/css/top.css" />

		<style>
			#parCarousel{
				width: 100%;
			}			
			#myCarousel .carousel-inner div img{
				width: 100%;
			}
		</style>

	</head>

	<body>
		<!--头部-->
		<jsp:include page="/WEB-INF/web/inc/header.jsp"></jsp:include>
		<!--头部结束-->
		<div class="container">
			<div class="row">
				<%-- 想做成只有滚动栏  static-web-js-menu.js 进行改动 --%>
				<div id="parCarousel" class="col-md-10" >
					<div id="myCarousel" class="carousel slide" >
						<!-- 轮播（Carousel）指标 -->
						<ol class="carousel-indicators"> 
							<li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
							<li data-target="#myCarousel" data-slide-to="1" ></li>
							<li data-target="#myCarousel" data-slide-to="2" ></li>
							<li data-target="#myCarousel" data-slide-to="3" ></li>
							<li data-target="#myCarousel" data-slide-to="4" ></li>
						</ol>
						<!-- 轮播（Carousel）项目 -->
						<div class="carousel-inner" align="center">
							<div class="item active">
								<img src="/computershop/static/web/images/index/index_banner1.png">
							</div>
							<div class="item">
								<img src="/computershop/static/web/images/index/index_banner2.png">
							</div>
							<div class="item">
								<img src="/computershop/static/web/images/index/index_banner3.png">
							</div>
							<div class="item">
								<img src="/computershop/static/web/images/index/index_banner4.png">
							</div>
							<div class="item">
								<img src="/computershop/static/web/images/index/index_banner5.png">
							</div>
						</div>
						<!-- 轮播（Carousel）导航 -->
						<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>
				</div>
			</div>
			
			<!--推荐栏目-->
			<div class="row">
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<p class="panel-title">新到好货</p>
						</div>	
						<div class="panel-body panel-item">
							<c:forEach items="${requestScope.newProductList}" var="product">
								<div class="col-md-12">
									<div class="col-md-7 text-row-2"><a href="/computershop/web/product?pid=${product.id}">${product.title}</a></div>
									<div class="col-md-2">￥${product.price}</div>
									<div class="col-md-3"><img src="/computershop/static/web/${product.image}/collect.png" class="img-responsive" /></div>
								</div>									
							</c:forEach>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							<p class="panel-title">热销排行</p>
						</div>
						<div id="hot-list" class="panel-body panel-item">
							<c:forEach items="${requestScope.hotProductList}" var="product">
								<div class="col-md-12">
									<div class="col-md-7 text-row-2"><a href="/computershop/web/product?pid=${product.id}">${product.title}</a></div>
									<div class="col-md-2">￥${product.price}</div>
									<div class="col-md-3"><img src="/computershop/static/web/${product.image}/collect.png" class="img-responsive" /></div>
								</div>
							</c:forEach>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--页脚开始-->
		<jsp:include page="/WEB-INF/web/inc/foot.jsp"></jsp:include>
		<!--页脚结束-->
	</body>

</html>